<template>
  <div class="paybody">
    <div class="one">
      <div class="left">商户名称</div>
      <div class="right">
        {{ pay.title }}
      </div>
    </div>
    <div class="two">消费总额</div>
    <div class="three">
      <div class="dd">
        <van-cell plain type="info" @touchstart.native.stop="show = true" class="cc">
          询问商户后输入
        </van-cell>
        <van-number-keyboard
          :show="show"
          title="中国建行"
          extra-key="."
          v-model="value"
          close-button-text="完成"
          @blur="show = false"
         
        />
        <h3>{{value}}</h3>
      </div>
    </div>
    <div class="four">
        <div class="sss" @click="fun(value,title)"> 确定买单</div>
       
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: "",
      title:this.$route.query.xiaohong
    }
  },
  computed: {
    pay() {
      return this.$route.query.xiaohong;
    },
  },
  methods:{
    fun(val,title){
      this.$router.push({name:"zf",query:{xiaobai:val,xiaolv:title}})
    },
   
  }
};
</script>

<style scoped lang="scss">
.paybody {
  width: 100%;
  height: 100%;
  margin-top: 0.48rem;

  .one {
    width: 100%;
    height: 0.5rem;
    background-color: white;
    display: flex;
    .left {
      width: 30%;
      height: 100%;
      line-height: 0.5rem;
      font-size: 0.16rem;
      text-align: center;
      font-weight: 700;
    }
    .right {
      width: 70%;
      height: 100%;
      font-size: 0.16rem;
      color: gray;
      text-align: center;
      line-height: 0.5rem;
    }
  }
  .two {
    width: 100%;
    height: 0.7rem;
    font-size: 0.18rem;
    text-align: center;
    line-height: 0.7rem;
  }
  .three {
    width: 100%;
    height: 1.15rem;
    .dd {
      width: 90%;
      height: 0.9rem;
      margin: auto;
      background-color: white;
      font-size: 0.18rem;
      .cc{
        font-size: 0.2rem;
        text-align: center;
        div{
            text-align: center;
            color: gray;
        }
      }
      h3{
        width: 50%;
        margin: auto;
        color: #096ec0;
        text-align: center;
      }
    }
  }
  .four{
    width: 100%;
    height: 3.6rem;
    margin-top: 0.1rem;
    background-color: white;
    position: relative;
    .sss{
        font-size: 0.18rem;
        width: 50%;
        height: 0.4rem;
        position: absolute;
        bottom: 0.2rem;
        left: 0.9rem;
        border: 0.02rem solid #096ec0;
        text-align: center;
        line-height: 0.4rem;
        border-radius: 0.1rem;
        color: #096ec0;
    }
  }
}
</style>